<template>
  <div class="fullscreen-dashboard" v-show="curCamera != 'Combine'">
    <!-- Top Bar -->
    <div class="top-bar">
      <h1 class="title">Real-time monitoring dashboards</h1>
    </div>
    <div class="main-content">
      <div class="main-content-panel">
        <div class="main-content-left">
          <div class="left-panel">
            <div class="camera-view" v-for="(camera, index) in 1" :key="index">
              <div class="main-content-title">
                <span class="text-style-title"
                  ><CameraFilled
                    style="width: 1.3rem; height: 1.3rem; margin-right: 4px"
                  />Camera
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="(Camera)"
                    placement="bottom-end"
                  >
                    <QuestionFilled
                      style="
                        width: 1.3rem;
                        height: 1.3rem;
                        margin-left: 4px;
                        color: #2483d1;
                      "
                    />
                  </el-tooltip>
                </span>
                <span class="text-style-title">
                  <!-- <FullScreen
                    v-if="!isCameraFullScreen"
                    style="
                      width: 1.3rem;
                      height: 1.3rem;
                      margin-right: 4px;
                      color: #2483d1;
                    "
                    @click="fullScreen(0)"
                  />
                  <CloseBold
                    v-else
                    style="
                      width: 1.3rem;
                      height: 1.3rem;
                      margin-right: 4px;
                      color: #2483d1;
                    "
                    @click="fullScreen(0)"
                  /> -->
                  <el-dropdown
                    size="small"
                    split-button
                    type="primary"
                    @command="dropCameraCommand"
                  >
                    <CameraFilled
                      style="width: 1.5rem; height: 1.5rem; margin-right: 4px"
                    />{{ curCamera }}
                    <template #dropdown>
                      <el-dropdown-menu>
                        <template v-for="item in cameraList" :key="item">
                          <el-dropdown-item :command="item.CameraName">{{
                            item.CameraName
                          }}</el-dropdown-item>
                        </template>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                  <ArrowDownBold
                    v-if="!cameraShow"
                    style="width: 1rem; height: 1rem; margin-left: 8px"
                    @click="cameraShow = !cameraShow"
                  />
                  <ArrowUpBold
                    v-else
                    style="width: 1rem; height: 1rem; margin-left: 8px"
                    @click="cameraShow = !cameraShow"
                  />
                </span>
              </div>

              <div class="camera-view-box" v-show="cameraShow">
                <!-- <img
                  v-show="curCamera == 'Main'"
                  class="camera-video"
                  src="/src/assets/camera.png"
                  :alt="`Camera ${index + 1}`"
                /> -->
                <!-- <video
                  v-show="curCamera == 'Main'"
                  id="video"
                  class="camera-video"
                  controls
                  autoplay
                >
                  Your browser is too old which doesn't support HTML5 video.
                </video> -->
                <!-- <img
                  v-show="curCamera != 'Main' && curIp"
                  class="camera-video"
                  id="stream"
                  :src="`http://${curIp}:81/stream`"
                  crossorigin=""
                />
                <img
                  v-show="curCamera != 'Main' && !curIp"
                  class="camera-video"
                  id="stream"
                  src="/src/assets/camera.png"
                  crossorigin=""
                /> -->
                <img
                  v-show="curIp"
                  class="camera-video"
                  id="stream"
                  :src="`http://${curIp}:81/stream`"
                  crossorigin=""
                />
                <img
                  v-show="!curIp"
                  class="camera-video"
                  id="stream"
                  src="/src/assets/camera.png"
                  crossorigin=""
                />
                <div class="camera-view-control" v-show="curCamera != 'Main'">
                  <div class="camera-view-control-box">
                    <div class="camera-view-control-box-item">
                      <span>Resolution</span>
                      <el-dropdown
                        split-button
                        type="primary"
                        @click="handleClick"
                        @command="dropCommand"
                      >
                        {{ curResolution }}
                        <template #dropdown>
                          <el-dropdown-menu>
                            <template v-for="(item, index) in resolutionList">
                              <el-dropdown-item :command="item.label">{{
                                item.label
                              }}</el-dropdown-item>
                            </template>

                            <!-- <el-dropdown-item>Action 2</el-dropdown-item>
                            <el-dropdown-item>Action 3</el-dropdown-item>
                            <el-dropdown-item>Action 4</el-dropdown-item>
                            <el-dropdown-item>Action 5</el-dropdown-item> -->
                          </el-dropdown-menu>
                        </template>
                      </el-dropdown>
                    </div>
                    <div class="camera-view-control-box-item">
                      <span>Quality</span>
                      <el-input-number
                        v-model="quality"
                        :min="4"
                        :max="63"
                        @change="handleChangeQuality"
                      />
                    </div>
                  </div>
                  <div class="camera-view-control-box">
                    <div class="camera-view-control-box-item">
                      <span>AEC DSP</span>
                      <el-tooltip
                        class="box-item"
                        effect="dark"
                        content="Automatic Exposure Control Digital Signal Control"
                        placement="bottom-end"
                      >
                        <QuestionFilled
                          style="
                            width: 1.3rem;
                            height: 1.3rem;
                            margin-left: 4px;
                            color: #2483d1;
                          "
                        />
                      </el-tooltip>
                      <div>
                        <el-radio-group
                          v-model="acedsp"
                          @change="handleChangeAecDsp"
                          :fill="'#63616d'"
                        >
                          <el-radio-button label="On" value="1" />
                          <el-radio-button label="Off" value="0" />
                        </el-radio-group>
                      </div>
                    </div>
                    <div class="camera-view-control-box-item">
                      <span style="width: 4.375rem">BPC</span>
                      <el-tooltip
                        class="box-item"
                        effect="dark"
                        content="Bad Pixel Correction"
                        placement="bottom-end"
                      >
                        <QuestionFilled
                          style="
                            width: 1.3rem;
                            height: 1.3rem;
                            margin-left: 4px;
                            color: #2483d1;
                          "
                        />
                      </el-tooltip>
                      <div>
                        <el-radio-group
                          :fill="'#63616d'"
                          v-model="bpc"
                          @change="handleChangeBpc"
                        >
                          <el-radio-button label="On" value="1" />
                          <el-radio-button label="Off" value="0" />
                        </el-radio-group>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- <img id="stream" class="camera-video" src="http://192.168.1.206:81/stream" crossorigin=""></img> -->
            </div>
            <div class="tool-view"></div>
          </div>
          <div class="center-panel">
            <div class="center-panel-top">
              <div class="main-content-title">
                <span class="text-style-title">
                  <!-- <CameraFilled
                  style="
                    width: 1.3rem;
                    height: 1.3rem;
                    margin-right: 4px;
                  " /> -->
                  <img
                    src="../assets/icon/data.png"
                    style="width: 1.3rem; height: 1.3rem; margin: 0 8px 0 0"
                    alt="" />
                  Relevant data
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="Transporter related data"
                    placement="bottom-end"
                  >
                    <QuestionFilled
                      style="
                        width: 1.3rem;
                        height: 1.3rem;
                        margin-left: 4px;
                        color: #2483d1;
                      "
                    /> </el-tooltip
                ></span>
                <span class="text-style-title">
                  <!-- <el-dropdown size="small" split-button type="primary">
                  <CameraFilled
                    style="width: 1.5rem; height: 1.5rem; margin-right: 4px"
                  />Small
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item>Action 1</el-dropdown-item>
                      <el-dropdown-item>Action 2</el-dropdown-item>
                      <el-dropdown-item>Action 3</el-dropdown-item>
                      <el-dropdown-item>Action 4</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown> -->
                  <ArrowDownBold
                    v-if="!dataShow"
                    style="width: 1rem; height: 1rem; margin-left: 8px"
                    @click="dataShow = !dataShow"
                  />
                  <ArrowUpBold
                    v-else
                    style="width: 1rem; height: 1rem; margin-left: 8px"
                    @click="dataShow = !dataShow"
                  />
                </span>
              </div>
              <div
                style="
                  display: flex;
                  height: 18vh;
                  width: 100%;
                  flex-direction: column;
                  justify-content: space-between;
                  background-color: #262629;
                  border-radius: 0 0 12px 12px;
                "
                v-show="dataShow"
              >
                <h3 style="background-color: #4f4f4a; padding: 0.5rem">
                  IMU DATA
                </h3>
                <div
                  style="
                    display: flex;
                    width: 100%;
                    justify-content: space-between;
                  "
                >
                  <div class="data-card">
                    <h3 class="card-title">Accelaration</h3>
                    <p class="card-content">
                      Accel X: {{ acceleration?.X || 0 }} m/s²
                    </p>
                    <p class="card-content">
                      Accel Y: {{ acceleration?.Y || 0 }} m/s²
                    </p>
                    <p class="card-content">
                      Accel Z: {{ acceleration?.Z || 0 }} m/s²
                    </p>
                  </div>

                  <div class="data-card">
                    <h3 class="card-title">Gyroscope</h3>
                    <p class="card-content">Gyro x: {{ Gyro?.X || 0 }}°</p>
                    <p class="card-content">Gyro Y: {{ Gyro?.Y || 0 }}°</p>
                    <p class="card-content">Gyro Z: {{ Gyro?.Z || 0 }}°</p>
                  </div>

                  <div class="data-card">
                    <h3 class="card-title">Others</h3>
                    <p class="card-content">
                      BUS Voltage: {{ relevantData?.Voltage || 0 }} V
                    </p>
                    <p class="card-content">
                      Env Temperature: {{ relevantData?.Temperature || 0 }} °C
                    </p>
                    <p class="card-content">
                      WifiStrength:
                      {{ relevantData?.WifiSignalStrength || 0 }} dBm
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div class="center-panel-bottom" style="margin-top: 1rem">
              <div class="main-content-title">
                <span class="text-style-title">
                  <!-- <CameraFilled
                  style="
                    width: 1.3rem;
                    height: 1.3rem;
                    margin-right: 4px;
                  " /> -->
                  <Tools
                    style="width: 1.3rem; height: 1.3rem; margin-right: 4px" />
                  <!-- <img
                    src="../assets//icon/data.png"
                    style="width: 1rem; height: 1rem; margin: 0 8px"
                    alt="" /> -->
                  Control
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="(WASD)"
                    placement="bottom-end"
                  >
                    <QuestionFilled
                      style="
                        width: 1.3rem;
                        height: 1.3rem;
                        margin-left: 4px;
                        color: #2483d1;
                      "
                    /> </el-tooltip
                ></span>
                <span class="text-style-title">
                  <ArrowDownBold
                    v-if="!dataShow"
                    style="width: 1rem; height: 1rem; margin-left: 8px"
                    @click="toolShow = !toolShow"
                  />
                  <ArrowUpBold
                    v-else
                    style="width: 1rem; height: 1rem; margin-left: 8px"
                    @click="toolShow = !toolShow"
                  />
                </span>
              </div>
              <div class="main-content-bottom-content" v-if="toolShow">
                <div
                  style="
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    height: 100%;
                  "
                >
                  <div
                    style="
                      display: flex;

                      /* height: 100%; */
                    "
                  >
                    <!-- const isWPressed = ref(false);
const isAPressed = ref(false);
const isSPressed = ref(false);
const isDPressed  -->
                    <div class="main-content-box">
                      <span class="btn-box" :class="{ active: isAPressed }">
                        <Back style="width: 1.5rem; height: 1.5rem"></Back>
                      </span>
                    </div>
                    <div class="main-content-box">
                      <span class="btn-box" :class="{ active: isWPressed }"
                        ><top style="width: 1.5rem; height: 1.5rem"
                      /></span>
                      <span class="btn-box"
                        ><House style="width: 1.5rem; height: 1.5rem"
                      /></span>
                      <span class="btn-box" :class="{ active: isSPressed }"
                        ><Bottom style="width: 1.5rem; height: 1.5rem"
                      /></span>
                    </div>
                    <div class="main-content-box">
                      <span class="btn-box" :class="{ active: isDPressed }"
                        ><Right style="width: 1.5rem; height: 1.5rem"
                      /></span>
                    </div>
                  </div>
                  <!-- <div style="margin-top: 20px">
                    <el-radio-group v-model="radio3" size="small">
                      <el-radio-button label="0.1" value="New York" />
                      <el-radio-button label="1" value="Washington" disabled />
                      <el-radio-button label="10" value="Los Angeles" />
                      <el-radio-button label="25" value="Chicago" />
                      <el-radio-button label="50" value="Chicago" />
                      <el-radio-button label="100" value="Chicago" />
                    </el-radio-group>
                  </div> -->
                </div>
                <div class="main-content-bottom-right">
                  <el-form
                    :inline="true"
                    :model="formInline"
                    class="demo-form-inline custom-form"
                    style="width: 90%"
                  >
                    <el-form-item
                      style="
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        width: 100%;
                      "
                      s
                    >
                      <span>speed</span
                      ><RefreshLeft
                        style="width: 1.3rem; height: 1.3rem"
                        @click="handleRefreshspeed"
                      />
                      <el-input-number
                        v-model="formInline.speed"
                        :controls="false"
                        :min="-100"
                        :max="100"
                        @change="handleChange"
                      />
                    </el-form-item>
                    <div class="slider-demo-block">
                      <el-slider
                        v-model="formInline.speed"
                        :min="-100"
                        :max="100"
                      />
                    </div>
                    <el-form-item
                      style="
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        width: 100%;
                      "
                    >
                      <span>acceleration</span
                      ><RefreshLeft
                        style="width: 1.3rem; height: 1.3rem"
                        @click="handleRefreshacc"
                      />
                      <el-input-number
                        v-model="formInline.acc"
                        :controls="false"
                        :min="0"
                        :max="100"
                        @change="handleChange"
                      />
                    </el-form-item>
                    <div class="slider-demo-block">
                      <el-slider v-model="formInline.acc" :min="0" :max="100" />
                    </div>
                  </el-form>
                </div>
                <div>
                  <div class="main-content-box">
                    <span class="btn-box" :class="{ active: isStop }">
                      <img
                        src="../assets/icon/stop.png"
                        style="width: 1.5rem; height: 1.5rem; margin: 0 8px"
                        alt=""
                      />
                      <!-- <Back style="width: 2.5rem; height: 2.5rem"></Back> -->
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="main-content-bottom">
          <div class="main-content-title">
            <span class="text-style-title">
              <img
                src="../assets//icon/terminal-window-fill.png"
                style="
                  width: 1.3rem;
                  height: 1.3rem;
                  margin-right: 4px;
                  color: #2483d1;
                "
                alt="" />
              Console
              <el-tooltip
                class="box-item"
                effect="dark"
                content="(Console)"
                placement="bottom-end"
              >
                <QuestionFilled
                  style="
                    width: 1.3rem;
                    height: 1.3rem;
                    margin-left: 4px;
                    color: #2483d1;
                  "
                /> </el-tooltip
            ></span>
            <span class="text-style-title">
              <!-- <FullScreen
                v-if="!isConsoleFullScreen"
                style="
                  width: 1.3rem;
                  height: 1.3rem;
                  margin-right: 4px;
                  color: #2483d1;
                "
                @click="fullScreen(1)"
              />
              <CloseBold
                v-else
                style="
                  width: 1.3rem;
                  height: 1.3rem;
                  margin-right: 4px;
                  color: #2483d1;
                "
                @click="fullScreen(1)"
              /> -->
              <ArrowDownBold
                v-if="!terminalShow"
                style="width: 1rem; height: 1rem; margin-left: 8px"
                @click="terminalShow = !terminalShow"
              />
              <ArrowUpBold
                v-else
                style="width: 1rem; height: 1rem; margin-left: 8px"
                @click="terminalShow = !terminalShow"
              />
            </span>
          </div>
          <terminal
            v-show="terminalShow"
            @handleTer="handleTer"
            @sendCommand="sendCommand"
            :terminalHeight="terminalHeight"
            :connectMsg="connectMsg"
          />
        </div>
      </div>
      <div class="right-panel">
        <div>
          <div class="main-content-title">
            <span class="text-style-title"
              ><Monitor
                style="
                  width: 1.3rem;
                  height: 1.3rem;
                  margin-right: 4px;
                " />Motor<el-tooltip
                class="box-item"
                effect="dark"
                content="(Motor Info)"
                placement="bottom-end"
              >
                <QuestionFilled
                  style="
                    width: 1.3rem;
                    height: 1.3rem;
                    margin-left: 4px;
                    color: #2483d1;
                  "
                /> </el-tooltip
            ></span>
            <span class="text-style-title">
              <ArrowDownBold
                v-if="!montorShow"
                style="width: 1rem; height: 1rem; margin-left: 8px"
                @click="montorShow = !montorShow"
              />
              <ArrowUpBold
                v-else
                style="width: 1rem; height: 1rem; margin-left: 8px"
                @click="montorShow = !montorShow"
              />
            </span>
          </div>
          <div
            style="
              height: 100%;
              background-color: #2a2a2a;
              border-radius: 0 0 0.625rem 0.625rem;
            "
          >
            <table v-show="montorShow" class="motor-data-table">
              <thead>
                <tr>
                  <th>Motor</th>
                  <th>Speed (RPM)</th>
                  <th>Direction (CW/CCW)</th>
                  <th>Amps (A)</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(data, index) in motorData" :key="index">
                  <td>
                    <!-- <img
                      src="../assets/motor.png"
                      style="width: 1rem; height: 1rem; color: #fff"
                      alt=""
                    /> -->
                    <span style="display: flex; align-items: center">
                      <!-- <Platform
                        style="width: 1rem; height: 1rem; margin: 0 8px"
                      /> -->
                      <img
                        src="../assets//icon/ACT022.png"
                        style="width: 1rem; height: 1rem; margin: 0 8px"
                        alt=""
                      />
                      Motor_{{ index + 1 }}
                    </span>
                  </td>
                  <td>{{ data?.Speed || 0 }}RPM</td>
                  <td>{{ data?.Direction || "/" }}</td>
                  <td>{{ data?.Amps || 0 }}A</td>
                </tr>
              </tbody>
            </table>
            <div
              ref="chartRef"
              v-show="montorShow"
              style="width: 100%; height: 40vh"
            ></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div v-show="curCamera == 'Combine'">
    <camera
      :ipList="ipList"
      :curResolution="curResolution"
      :curCamera="curCamera"
      :quality="quality"
      :acedsp="acedsp"
      :bpc="bpc"
      @handleInfo="handleInfo"
    />
  </div>
</template>

<script setup>
import camera from "./camera.vue";
import axios from "axios";
import {
  ref,
  reactive,
  onMounted,
  onBeforeUnmount,
  onUnmounted,
  watch,
} from "vue";
import terminal from "../components/terminal.vue";
import * as echarts from "echarts";
const chartRef = ref(null);
import {
  CameraFilled,
  ArrowDownBold,
  ArrowUpBold,
  Monitor,
  Platform,
  QuestionFilled,
  FullScreen,
  CloseBold,
  Back,
  Right,
  Top,
  Bottom,
  TopRight,
  TopLeft,
  BottomRight,
  BottomLeft,
  House,
  Tools,
  RefreshLeft,
} from "@element-plus/icons-vue";
const curIp = ref("");
const curResolution = ref("800*600");

const cameraList = ref([
  { CameraName: "Main", value: "" },
  { CameraName: "Front", value: "" },
  { CameraName: "Left", value: "" },
  { CameraName: "Right", value: "" },
  { CameraName: "Back", value: "" },
  { CameraName: "Combine", value: "" },
]);

const resolutionList = ref([
  {
    label: "1600*1200",
    value: "15",
  },
  {
    label: "1280*1024",
    value: "14",
  },
  {
    label: "1280*720",
    value: "13",
  },
  {
    label: "1024*768",
    value: "12",
  },
  {
    label: "800*600",
    value: "11",
  },
  {
    label: "640*480",
    value: "10",
  },
]);
const quality = ref("12");
const acedsp = ref("1");
const bpc = ref("1");
// 1
// 1

const curCamera = ref("Main");
// const dropCameraCommand = (e) => {
//   const cameraEle = document.getElementsByClassName("camera-video")[0];
//   console.log("dropCameraCommand", e);
//   curCamera.value = e;
//   if (curCamera.value == "Main") {
//     cameraEle.style.height = "100%";
//   } else if (curCamera.value == "Combine") {
//   } else {

//     cameraEle.style.height = "80%";
//     console.log(1111111111111111111111111111111111,cameraEle.style.height);
//     handleChangeip();
//   }
// };
const dropCameraCommand = (e) => {
  // 获取所有 class 为 camera-video 的元素
  const cameraEles = document.getElementsByClassName("camera-video");
  if (e === "Main") {
    curIp.value = ipList.value.MainCam.IP;
  }else if (e === "Front") {
    curIp.value = ipList.value.FrontCam.IP;
  }else if (e === "Left") {
    curIp.value = ipList.value.LeftCam.IP;
  }else if (e === "Right") {
    curIp.value = ipList.value.RightCam.IP;
  }else if (e === "Back") {
    curIp.value = ipList.value.BackCam.IP;
  }
  // curIp.value = ipList.value.FrontCam.Ip;
  // console.log("dropCameraCommand", e, ipList.value.FrontCam);
  curCamera.value = e;

  // 遍历所有相机元素
  Array.from(cameraEles).forEach((cameraEle) => {
    if (curCamera.value === "Main") {
      cameraEle.style.height = "100%";
    } else if (curCamera.value === "Combine") {
      // 处理 Combine 的逻辑
    } else {
      cameraEle.style.height = "80%";
      console.log("cameraEle.style.height:", cameraEle.style.height);
      handleChangeip();
    }
  });
};
const dropCommand = (e) => {
  console.log("dropCommand", e);
  curResolution.value = e;
  handleChangeip();
};
const handleChangeAecDsp = (e) => {
  console.log("handleChangeAecDsp", e);
  acedsp.value = e;
  handleChangeip();
};
const handleChangeBpc = (e) => {
  console.log("handleChangeBpc", e);
  bpc.value = e;
  handleChangeip();
};
const handleChangeQuality = (e) => {
  console.log("handleChangeQuality", e);
  quality.value = e;
  handleChangeip();
};

const handleInfo = (info) => {
  console.log("handleInfo", info);
  quality.value = info.quality;
  acedsp.value = info.acedsp;
  bpc.value = info.bpc;
  curResolution.value = info.curResolution;
  curCamera.value = info.curCamera;
};
// const handleChangeip = () => {
//   // 定义请求的 URL
//   // const url = "https://api.example.com/data";
// http://Cam_IP/control?var=framesize&val=11   (Resolution)
// http://Cam_IP/control?var=quality&val=12 (Quality)
// http://Cam_IP/control?var=aec2&val=1
// http://Cam_IP/control?var=bpc&val=1
//   // 发起 GET 请求

// };

const handleRefreshspeed = () => {
  formInline.value.speed = 0;
};
const handleRefreshacc = () => {
  formInline.value.acc = 0;
};

const ipList = ref({});
const getIpList = async (postData) => {
  console.log(111111111111);

  try {
    // 定义请求的 URL 和要发送的数据
    const url = "http://localhost:8080/socket/getJsonFileData";

    // const postData =
    // 发送 POST 请求
    // const res = await axios.post(url, postData);
    const res = await axios
      .post(url, postData, {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      })
      .then(
        (response) => {
          console.log("/a1", response.data);
          ipList.value = JSON.parse(response.data.property);
          curIp.value = ipList.value.MainCam.IP;
          console.log("ipList.value", ipList.value);
        },
        (error) => {
          console.log("错误", error.message);
        }
      );
    // 处理响应
    // response.value = res.data;
    // console.log("响应数据:", res.data);
    // if (res.data.totalCount > 0) {
    //   ipList.value= res.data.property;
    // }
  } catch (error) {
    // 处理错误
    // console.error("请求失败:", error);
    // response.value = `请求失败: ${error.message}`;
  }
};
const handleChangeip = () => {
  let ramesize = 11;
  if (curResolution.value === "640*480") {
    ramesize = 10;
  } else if (curResolution.value === "800*600") {
    ramesize = 11;
  } else if (curResolution.value === "1024*768") {
    ramesize = 12;
  } else if (curResolution.value === "1280*720") {
    ramesize = 13;
  } else if (curResolution.value === "1280*1020") {
    ramesize = 14;
  } else if (curResolution.value === "1600*1200") {
    ramesize = 15;
  }
  const url1 = `http://${curIp.value}/control?var=framesize&val=${ramesize}`;
  const url2 = `http://${curIp.value}/control?var=quality&val=${quality.value}`;
  const url3 = `http://${curIp.value}/control?var=aec2&val=${acedsp.value}`;
  const url4 = `http://${curIp.value}/control?var=bpc&val=${bpc.value}`;
  // 定义四个请求的 URL
  const urls = [url1, url2, url3, url4];
  console.log(urls);

  // 使用 Promise.all 同时发起多个 GET 请求
  Promise.all(urls.map((url) => axios.get(url)))
    .then((responses) => {
      // 所有请求都成功时，处理每个响应
      responses.forEach((response, index) => {
        console.log(`请求 ${index + 1} 成功，响应数据：`, response.data);
      });
    })
    .catch((error) => {
      // 如果任何一个请求失败，处理错误
      console.error("请求失败，错误信息：", error);
    });
};
// 另外四个摄像头的地址是< img id="stream" src="http://ip:81/stream" crossorigin="">
// http get请求:
// http://Cam_IP/control?var=framesize&val=11   (Resolution)
// http://Cam_IP/control?var=quality&val=12 (Quality)
// http://Cam_IP/control?var=aec2&val=1
// http://Cam_IP/control?var=bpc&val=1

// 控制显示隐藏
const cameraShow = ref(true);
const montorShow = ref(true);
const terminalShow = ref(true);
const dataShow = ref(true);
const toolShow = ref(true);
const isConsoleFullScreen = ref(true);
const isCameraFullScreen = ref(true);

const formInline = ref({
  speed: 0,
  acc: 0,
});

const onSubmit = () => {
  console.log("submit!");
};

const value = ref(0);

const formatTooltip = (val) => {
  return val / 100;
};

const wifiStrength = ref(0);

// // WebSocket
// 创建时间戳
function getCurrentTime() {
  const now = new Date(); // 获取当前时间
  const hours = String(now.getHours()).padStart(2, "0"); // 获取小时并补零
  const minutes = String(now.getMinutes()).padStart(2, "0"); // 获取分钟并补零
  const seconds = String(now.getSeconds()).padStart(2, "0"); // 获取秒并补零

  return `${hours}:${minutes}:${seconds}`; // 返回格式化的时间字符串
}

const response = ref(null);
const sendPostRequest = async (postData) => {
  try {
    // 定义请求的 URL 和要发送的数据
    const url = "http://localhost:8080/socket/send";

    // const postData =
    // 发送 POST 请求
    // const res = await axios.post(url, postData);
    const res = await axios
      .post(url, postData, {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      })
      .then(
        (response) => {
          console.log("/a1", response.data);
        },
        (error) => {
          console.log("错误", error.message);
        }
      );
    // 处理响应
    response.value = res.data;
    console.log("响应数据:", res.data);
  } catch (error) {
    // 处理错误
    // console.error("请求失败:", error);
    // response.value = `请求失败: ${error.message}`;
  }
};
const listenData = async (postData) => {
  try {
    // 定义请求的 URL 和要发送的数据
    const url = "http://localhost:8080/socket/listenData ";

    // const postData =
    // 发送 POST 请求
    // const res = await axios.post(url, postData);
    const res = await axios
      .post(url, postData, {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      })
      .then(
        (response) => {
          console.log("/a2", response.data);
        },
        (error) => {
          console.log("错误", error.message);
        }
      );
    // 处理响应
    response.value = res.data;
    console.log("响应数据:", res.data);
  } catch (error) {
    // 处理错误
    // console.error("请求失败:", error);
    // response.value = `请求失败: ${error.message}`;
  }
};
// http://localhost:8080/socket/listenData    -- socket
import SockJS from "sockjs-client/dist/sockjs.min.js";
import Stomp from "stompjs";
import { h } from "vue";
const relevantData = ref({});
const motorData = ref([
  { speed: 0, Direction: "/", Amps: 0 },
  { speed: 0, Direction: "/", Amps: 0 },
  { speed: 0, Direction: "/", Amps: 0 },
  { speed: 0, Direction: "/", Amps: 0 },
]);
const acceleration = ref({});
const Gyro = ref({});
// const echartData = ref([]);
const echartData = ref([
  // { Time: "10:50:00", Temperature: 20 },
  // { Time: "10:50:01", Temperature: 20 },
  // { Time: getCurrentTime(), Temperature: 20 },
  // { Time: "00:00:00", Temperature: 20 },
  // { Time: "00:00:10", Temperature: 50 },
  //   { Time: "01:00", Temperature: 22 },
]);
let stompClient = null;
const connectMsg = ref([]);
const connectWebSocket = () => {
  const socket = new SockJS("http://localhost:8080/ws-socket");
  // const socket = new SockJS("/api");
  // var socket = new WebSocket('http://localhost:8080/ws-socket');
  // const stompClient = Stomp.over(socket);
  stompClient = Stomp.over(socket);
  stompClient.connect({}, (frame) => {
    // console.log("Connected: " + frame);
    stompClient.subscribe("/topic/messages", (message) => {
      //接收到socket数据参数
      // console.log("message.body", message.body, JSON.parse(message.body));
      motorData.value = [];
      if (message) {
        relevantData.value = JSON.parse(message.body);
        acceleration.value = relevantData.value.Accel; // 更新加速度
        Gyro.value = relevantData.value.Gyro; // 更新角度
        // wifiStrength.value = relevantData.value.WifiStrength; // 更新wifi信号强度
        // echartData.value.push(relevantData.value);
        // if (echartData.value.length > 10) {
        //   echartData.value.shift();
        // }
        motorData.value.push;
        motorData.value.push(
          relevantData.value.Motor_1,
          relevantData.value.Motor_2,
          relevantData.value.Motor_3,
          relevantData.value.Motor_4
        );
        if (echartData.value.length > 10) {
          echartData.value.shift();
        }
        echartData.value.push({
          Time: getCurrentTime(),
          Temperature: relevantData.value.Temperature,
        });
        option.dataset[0].source = echartData.value;
        option.xAxis.data = [];
        (option.xAxis.data = echartData.value.map((item) => item.Time)), // 设置横坐标为时间
          // console.log(2222222, echartData.value, option);
          myChart.setOption(option, true); // 更新图表
      }
    });
    stompClient.subscribe("/topic/connect", (message) => {
      //接受到socket服务器重连信息
      console.log("connectMsg", message.body);
      // connectMsg.value = message.body;
      connectMsg.value.push({
        id: Date.now(),
        type: "connectMsg",
        content: message.body,
      });
      // connectMsg.value = "";
    });
    // http://localhost:8080/socket/send   -- 前端调用接口给socket发送指令参数为{message：{json字符串}}
    // 向后端发送消息
  });
};
const sendMessageToBackend = (messageBody) => {
  // 构造JSON字符串
  const jsonData = JSON.stringify({
    type: "Console",
    Msg: messageBody,
  });
  const msg = {
    message: jsonData,
  };
  const formData = new URLSearchParams();
  for (const key in msg) {
    formData.append(key, msg[key]);
  }
  console.log("formData", formData);
  sendPostRequest(formData);
};

// Camera views
// const cameras = ref([
//   { src: "https://via.placeholder.com/300x200" },
//   { src: "https://via.placeholder.com/300x200" },
//   { src: "https://via.placeholder.com/300x200" },
//   { src: "https://via.placeholder.com/300x200" },
// ]);

// Terminal
const logs = ref([]);
const inputCommand = ref("");

const sendCommand = (command) => {
  console.log("command", command);
  connectMsg.value.push({
    id: Date.now(),
    type: "Console",
    content: command,
  });

  sendMessageToBackend(command);
};
const fullScreen = (flag) => {
  if (flag == 0) {
    isCameraFullScreen.value = !isCameraFullScreen.value;
  } else {
    isConsoleFullScreen.value = !isConsoleFullScreen.value;
  }
};
// Simulate real-time data updates
let interval;

// 模拟从服务器获取数据

// 模拟数据
const rawData = [...echartData.value];

const option = {
  dataset: [
    {
      id: "dataset_raw",
      source: [], // 初始数据为空
    },
  ],
  title: {
    text: "Temperature Variation Over Time",
    textStyle: {
      color: "white",
    },
  },
  grid: {
    left: "5%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    nameLocation: "middle",
    splitArea: {
      show: true,
      areaStyle: {
        color: ["rgba(255,255,255,0.0)", "rgba(255,255,255,0.0)"],
      },
    },
    nameTextStyle: {
      color: "white",
    },
    axisLabel: {
      color: "white",
    },
  },
  yAxis: {
    name: "Temperature (°C)",
    type: "value",
    splitArea: {
      show: true,
      areaStyle: {
        color: ["rgba(255,255,255,0.0)", "rgba(255,255,255,0.0)"],
      },
    },
    nameTextStyle: {
      color: "white",
    },
    axisLabel: {
      color: "white",
    },
  },
  series: [
    {
      type: "line",
      datasetId: "dataset_raw",
      showSymbol: false,
      encode: {
        x: "Time",
        y: "Temperature",
      },
      areaStyle: {},
      smooth: true,
    },
  ],
};

onBeforeUnmount(() => {
  clearInterval(interval);
});

// tool
const move = ref({
  stop: false,
  mode: "speed",
  wasd: "",
  value: 0,
  time: 0,
});

const spin = ref({
  direction: "left",
  angle: 0,
});

const motor = ref({
  id: 0,
  dir: "cw",
  angle: 0,
});

const isWPressed = ref(false);
const isAPressed = ref(false);
const isSPressed = ref(false);
const isDPressed = ref(false);
const isStop = ref(false);
function sendCommands() {
  const commands = {
    move: {
      stop: move.value.stop,
      mode: move.value.mode,
      wasd: move.value.wasd,
      value: move.value.value,
      time: move.value.time,
    },
    spin: {
      direction: spin.value.direction,
      angle: spin.value.angle,
    },
    motor: {
      id: motor.value.id,
      dir: motor.value.dir,
      angle: motor.value.angle,
    },
  };

  console.log("Sending Commands:", commands);
}

// 监听wasd
const keyStatus = reactive({
  w: false,
  a: false,
  s: false,
  d: false,
});
// 按键按下

const handleKeyDown = (event) => {
  if (isConsole.value) {
    return;
  }
  isStop.value = false;
  switch (event.code) {
    case "KeyW":
      if (!isWPressed.value) {
        console.log("Key W released");
        keyStatus.w = true;
        isWPressed.value = true;
        if (isAPressed.value) {
          sendCommand(
            `move 0 S WA ${formInline.value.acc} ${formInline.value.speed} 0`
          );
        } else if (isSPressed.value) {
          isStop.value = true;
          sendCommand(
            `move 1 S S ${formInline.value.acc} ${formInline.value.speed} 0`
          );
          setTimeout(() => {
            sendCommand(
              `move 0 S W ${formInline.value.acc} ${formInline.value.speed} 0`
            );
          }, 50);
          // isStop.value = false;
        } else if (isDPressed.value) {
          sendCommand(
            `move 0 S WD ${formInline.value.acc} ${formInline.value.speed} 0`
          );
        } else {
          sendCommand(
            `move 0 S W ${formInline.value.acc} ${formInline.value.speed} 0`
          );
        }
      }
      break;
    case "KeyA":
      if (!isAPressed.value) {
        console.log("Key a released");
        keyStatus.a = true;
        isAPressed.value = true;

        if (isWPressed.value) {
          sendCommand(
            `move 0 S WA ${formInline.value.acc} ${formInline.value.speed} 0`
          );
        } else if (isSPressed.value) {
          sendCommand(
            `move 0 S SA ${formInline.value.acc} ${formInline.value.speed} 0`
          );
          // sendCommand(`move 0 S W ${formInline.speed} 0`);
        } else if (isDPressed.value) {
          isStop.value = true;
          sendCommand(
            `move 1 S S ${formInline.value.acc} ${formInline.value.speed} 0`
          );
        } else {
          sendCommand(`spin L 32767 `);
        }
      }

      break;
    case "KeyS":
      if (!isSPressed.value) {
        console.log("Key S released");
        keyStatus.s = true;
        isSPressed.value = true;
        if (isWPressed.value) {
          isStop.value = true;
          sendCommand(
            `move 1 S S ${formInline.value.acc} ${formInline.value.speed} 0`
          );
          setTimeout(() => {
            sendCommand(
              `move 0 S S ${formInline.value.acc} ${formInline.value.speed} 0`
            );
          });
        } else if (isAPressed.value) {
          sendCommand(
            `move 0 S SA ${formInline.value.acc} ${formInline.value.speed} 0`
          );
        } else if (isDPressed.value) {
          sendCommand(
            `move 0 S SD ${formInline.value.acc} ${formInline.value.speed} 0`
          );
        } else {
          sendCommand(
            `move 0 S S ${formInline.value.acc} ${formInline.value.speed} 0`
          );
        }
      }

      break;
    case "KeyD":
      if (!isDPressed.value) {
        console.log("Key D released");
        keyStatus.d = true;
        isDPressed.value = true;
        if (isWPressed.value) {
          sendCommand(
            `move 0 S WD ${formInline.value.acc} ${formInline.value.speed} 0`
          );
        } else if (isSPressed.value) {
          sendCommand(
            `move 0 S SD ${formInline.value.acc} ${formInline.value.speed} 0`
          );
          // sendCommand(`move 0 S W ${formInline.speed} 0`);
        } else if (isAPressed.value) {
          isStop.value = true;
          sendCommand(
            `move 1 S S ${formInline.value.acc} ${formInline.value.speed} 0`
          );
        } else {
          sendCommand(`spin D 32767 `);
        }
      }
      break;
    default:
      break;
  }
  // isWPressed.value = true;
};

// 按键释放
const handleKeyUp = (event) => {
  if (isConsole.value) {
    return;
  }
  isStop.value = false;
  switch (event.code) {
    case "KeyW":
      console.log("Key W released");
      isWPressed.value = false;
      keyStatus.w = false;
      if (isSPressed.value) {
        // sendCommand(
        //   `move 0 S S ${formInline.value.acc} ${formInline.value.speed} 0`
        // );
      } else if (isAPressed.value) {
        sendCommand(`spin L 32767 `);
        // sendCommand(`move 0 S W ${formInline.speed} 0`);
      } else if (isDPressed.value) {
        sendCommand(`spin D 32767 `);
      } else {
        sendCommand(
          `move 1 S W ${formInline.value.acc} ${formInline.value.speed} 0`
        );
      }
      break;
    case "KeyA":
      console.log("Key A released");
      keyStatus.a = false;
      isAPressed.value = false;
      if (isSPressed.value) {
        sendCommand(
          `move 0 S S ${formInline.value.acc} ${formInline.value.speed} 0`
        );
      } else if (isWPressed.value) {
        // sendCommand(`spin L ${formInline.angel} `);
        sendCommand(
          `move 0 S W ${formInline.value.acc} ${formInline.value.speed} 0`
        );
      } else if (isDPressed.value) {
        sendCommand(`spin D 32767 `);
      } else {
        sendCommand(
          `move 1 S W ${formInline.value.acc} ${formInline.value.speed} 0`
        );
      }
      break;
    case "KeyS":
      console.log("Key S released");
      keyStatus.s = false;
      isSPressed.value = false;
      if (isAPressed.value) {
        sendCommand(`spin L 32767 `);
      } else if (isWPressed.value) {
        // sendCommand(`spin L ${formInline.angel} `);
        sendCommand(
          `move 0 S W ${formInline.value.acc} ${formInline.value.speed} 0`
        );
      } else if (isDPressed.value) {
        sendCommand(`spin D 32767 `);
      } else {
        sendCommand(
          `move 1 S W ${formInline.value.acc} ${formInline.value.speed} 0`
        );
      }
      break;
    case "KeyD":
      console.log("Key D released");
      keyStatus.d = false;
      isDPressed.value = false;
      if (isSPressed.value) {
        sendCommand(
          `move 0 S S ${formInline.value.acc} ${formInline.value.speed} 0`
        );
      } else if (isWPressed.value) {
        // sendCommand(`spin L ${formInline.angel} `);
        sendCommand(
          `move 0 S W ${formInline.value.acc} ${formInline.value.speed} 0`
        );
      } else if (isAPressed.value) {
        sendCommand(`spin L 32767 `);
      } else {
        sendCommand(
          `move 1 S W ${formInline.value.acc} ${formInline.value.speed} 0`
        );
      }
      break;
    default:
      break;
  }
};

const handleWindowKeyDown = (event) => {
  handleKeyDown(event);
};

const handleWindowKeyUp = (event) => {
  handleKeyUp(event);
};

const isConsole = ref(false);
const handleTer = (event) => {
  isConsole.value = true;
};

let myChart = null;
const createEcharts = () => {
  myChart = echarts.init(chartRef.value);
  myChart.setOption(option, true);
};
onMounted(() => {
  createEcharts();
  window.onresize = function () {
    //自适应大小
    myChart.resize();
  };
  // myChart.setOption( option);
  const handleClick = (event) => {
    isConsole.value = false;
  };

  // console.log(123, chartRef.value);

  window.addEventListener("keydown", handleWindowKeyDown);
  window.addEventListener("keyup", handleWindowKeyUp);
  document.addEventListener("click", handleClick);
  listenData();
  getIpList();
  start();
  connectWebSocket();
});

onUnmounted(() => {
  window.removeEventListener("keydown", handleWindowKeyDown);
  window.removeEventListener("keyup", handleWindowKeyUp);
  document.removeEventListener("click", handleClick);
});

// 监听多个变量
const terminalHeight = ref(0);
watch(
  [cameraShow, montorShow, terminalShow, dataShow, toolShow, curCamera],
  (
    [newCamera, newMontor, newTerminal, newData, newtoolShow, newcurCamera],
    [oldCamera, oldMontor, oldTerminal, oldData, oldtoolShow, oldcurCamera]
  ) => {
    // console.log('Old values:', oldCamera, oldMontor, oldTerminal, oldData, oldtoolShow);
    // console.log('New values:', newCamera, newMontor, newTerminal, newData, newtoolShow);
    const cameraDom = document.getElementsByClassName("camera-view-box")[0];
    const toolDom = document.getElementsByClassName(
      "main-content-bottom-content"
    )[0];
    console.log();

    const terminalHeightValue = () => {
      if (cameraShow.value) {
        return terminalShow.value ? 26 : undefined;
      } else if (!cameraShow.value && dataShow.value && toolShow.value) {
        return 26;
      } else {
        const dataShowVal = dataShow.value;
        const toolShowVal = toolShow.value;
        const terminalHeightMap = {
          true: {
            true: 45,
            false: 57,
          },
          false: {
            true: 42,
            false: 75,
          },
        };
        return terminalHeightMap[dataShowVal][toolShowVal];
      }
    };
    const cameraEle = document.getElementsByClassName("camera-video")[0];
    // 计算 cameraDom 的高度
    const cameraHeightValue = () => {
      if (cameraShow.value) {
        console.log(12311);

        // if (curCamera.value != "Main") {
        //   console.log(22211, cameraEle);
        //   if (curCamera.value == "Combine") {
        //     // cameraEle.style.position = "absolute";
        //     cameraEle.style.width = "100vh";
        //     cameraEle.style.height = "93vh";
        //   } else {
        //     console.log(33311);
        //     cameraEle.style.height = "80%!important";
        //   }
        // }
        return terminalShow.value ? "55vh" : "80vh";
      } else {
        return undefined;
      }
    };

    // 计算 toolDom 的高度
    const toolHeightValue = () => {
      return terminalShow.value ? "31vh" : dataShow.value ? "56vh" : "76vh";
    };

    // 设置高度
    if (cameraDom) {
      if (cameraShow.value && cameraHeightValue() !== cameraDom.style.height) {
        if (cameraDom) {
          cameraDom.style.height = cameraHeightValue();
        }
      }
    }

    if (
      terminalHeight.value !== terminalHeightValue() &&
      terminalHeightValue() !== undefined
    ) {
      terminalHeight.value = terminalHeightValue();
    }

    if (toolDom) {
      if (
        toolDom.style.height !== toolHeightValue() &&
        toolHeightValue() !== undefined
      ) {
        toolDom.style.height = toolHeightValue();
      }
    }
  },
  { deep: true } // 如果这是一组嵌套对象或数组，可以启用深度监听
);
// watch(cameraShow, (New, Old) => {
//   console.log(`新值:${New} ——— 老值:${Old}`);
// });

import { ZLMRTCClient } from "../utils/ZLMRTCClient.js";

let player = null;
let recvOnly = false;
let resArr = [];

// let ishttps = "https:" == document.location.protocol ? true : false;
// let isLocal = "file:" == document.location.protocol ? true : false;
// let url =
//   document.location.protocol +
//   "//" +
//   window.location.host +
//   "/index/api/webrtc?app=live&stream=test&type=play";
// if (!ishttps && !isLocal) {
//   alert(
//     "本demo需要在https的网站访问 ,如果你要推流的话(this demo must access in site of https if you want push stream)"
//   );
// }
// if (isLocal) {
//   url = "http://127.0.0.1" + "/index/api/webrtc?app=live&stream=test&type=play";
// }
// https://default.zlmediakit.com/index/api/webrtc?app=live&stream=test&type=play
let url =
  "https://default.zlmediakit.com" +
  "/index/api/webrtc?app=live&stream=test&type=play";
// document.getElementById('streamUrl').value = url
const PlayUrl = ref(url);

const start_play = () => {
  // let h = 720;
  // let w = 1280;
  let h = 600;
  let w = 800;
  player = new ZLMRTCClient.Endpoint({
    element: document.getElementById("video"), // video 标签
    debug: false, // 是否打印日志
    zlmsdpUrl: url, //流地址
    simulcast: false,
    useCamera: false,
    audioEnable: false,
    videoEnable: true,
    recvOnly: true,
    resolution: { w: w, h: h },
    usedatachannel: false,
  });

  player.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, function (e) {
    // ICE 协商出错
    console.log("ICE 协商出错");
  });

  player.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, function (e) {
    //获取到了远端流，可以播放
    console.log("播放成功", e.streams);
  });

  player.on(
    ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED,
    function (e) {
      // offer anwser 交换失败
      console.log("offer anwser 交换失败", e);
      stop();
    }
  );

  player.on(ZLMRTCClient.Events.CAPTURE_STREAM_FAILED, function (s) {
    // 获取本地流失败

    console.log("获取本地流失败");
  });

  player.on(
    ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE,
    function (state) {
      // RTC 状态变化 ,详情参考 https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/connectionState
      console.log("当前状态==>", state);
    }
  );

  player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_OPEN, function (event) {
    console.log("rtc datachannel 打开 :", event);
  });

  player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_MSG, function (event) {
    console.log("rtc datachannel 消息 :", event.data);
    document.getElementById("msgrecv").value = event.data;
  });
  player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_ERR, function (event) {
    console.log("rtc datachannel 错误 :", event);
  });
  player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_CLOSE, function (event) {
    console.log("rtc datachannel 关闭 :", event);
  });
};

const start = () => {
  console.log("开始");
  stop();

  // let h = 720;
  // let w = 1280;
  let h = 600;
  let w = 800;
  if (!recvOnly) {
    // ZLMRTCClient.isSupportResolution(w, h)
    //   .then((e) => {
    //     start_play();
    //   })
    //   .catch((e) => {
    //     console.log(e);

    //     alert("not support resolution");
    //   });
    start_play();
  } else {
    start_play();
  }
};
const stop = () => {
  if (player) {
    player.close();
    player = null;
    let remote = document.getElementById("video");
    if (remote) {
      remote.srcObject = null;
      remote.load();
    }
  }
};
</script>

<style scoped>
.fullscreen-dashboard {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  color: #fff;
  font-family: Arial, sans-serif;
}
@media screen and (max-width: 1813px) {
  .fullscreen-dashboard {
    width: 1813px;
    color: #fff;
  }
}
@media screen and (max-height: 774px) {
  .fullscreen-dashboard {
    height: 774px !important;
    color: #fff;
  }
}
.top-bar {
  width: 100%;
  height: 7vh;
  padding: 0;
  background-color: #1e1e20;
  border-bottom: 0.0625rem solid #444;
  text-align: center;
}

.title {
  font-size: 1.5rem;
  font-weight: bold;
}

.main-content {
  display: flex;
  height: 93vh;
}

.main-content-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.5rem;
  padding: 0 2%;
  background-color: #3a3a3a;
}

.main-content-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 67%;
  /* width: 100%; */
  height: 93vh;
  height: 100%;
  background-color: #1e1e20;
}

.main-content-left {
  display: flex;
  height: 50vh;
}

.main-content-bottom {
  position: absolute;
  bottom: 1.25rem;
  width: 100%;
  /* width: 67%; */
  /* height: 32vh; */
  /* flex: 1; */
  display: flex;
  flex-direction: column;
  /* margin-top: 1.25rem; */
}

.left-panel,
.center-panel,
.right-panel {
  flex: 1;
  padding: 0 0.625rem;
  background-color: #1e1e20;
}

.right-panel {
  border-right: none;
  height: 100%;
}

.motor-data-table {
  width: 100%;
  height: 45vh;
  margin-bottom: 1.25rem;
}

.motor-data-table th,
.motor-data-table td {
  border-bottom: 0.0625rem solid #444;
  padding: 0.5rem;
  text-align: center;
}

.motor-data-table th {
  font-weight: bold;
}

.data-card {
  flex: 1;
  margin-bottom: 0.5rem;
  text-align: center;
}

.data-card:hover {
  transform: translateY(-0.3125rem);
  box-shadow: 0 0.375rem 0.625rem rgba(0, 0, 0, 0.15);
}

.card-title {
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: 600;
  padding: 0.3rem;
  background-color: #3f3f46;
}

.card-content {
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0.2rem 0;
}

.card-content strong {
  color: #14e2f5;
  font-weight: bold;
}

.data-card[data-card="wifi"] {
  background: linear-gradient(135deg, #2d3436 0%, #5a6daa 100%);
}

.camera-view {
  margin-bottom: 0.625rem;
  width: 100%;
  overflow: hidden;
}

.camera-view-box {
  height: 55vh;
}
.camera-video {
  width: 100%;
  /* height: 80%; */
  /* position: absolute; */
  z-index: 999;
  height: 100%;
  /* height: 45vh; */
  /* height: 55vh; */
  /* height: 80vh; */
  object-fit: cover;
  border-radius: 0 0 0.5rem 0.5rem;
  transition: transform 0.3s;
}
.video1 {
  height: 100%;
}

.camera-video:hover {
  transform: scale(1.05);
}

.camera-view-control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 19%;
  background-color: #262629;
  border-radius: 0.625rem;
}
/* .camera-view-control:nth-child(n){
  flex: 1;
} */
.camera-view-control-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 50%;
  height: 100%;
}
.camera-view-control-box div {
  margin: 0.25rem 0;
}
.camera-view-control-box-item {
  display: flex;
  flex: 1;
  align-items: center;
  /* justify-content: center; */
  justify-content: space-between;
  padding: 0 1.25rem;
  box-sizing: border-box;
}
.camera-view-control-box-item span {
  margin-right: 0.625rem;
}
.terminal {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.terminal-output {
  flex: 1;
  overflow-y: auto;
  padding: 0.625rem;
  border: 0.0625rem solid #444;
  border-radius: 0.5rem;
  margin-bottom: 0.625rem;
  background-color: #3a3a3a;
}

.log-entry {
  margin-bottom: 0.3125rem;
}

.terminal-input {
  display: flex;
  gap: 0.3125rem;
}

.terminal-input input {
  flex: 1;
  padding: 0.3125rem;
  border: 0.0625rem solid #444;
  border-radius: 0.25rem;
  background-color: #3a3a3a;
  color: #fff;
}

.terminal-input button {
  padding: 0.3125rem 0.625rem;
  background-color: #4a4a4a;
  color: #fff;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
}

.main-content-bottom-content {
  display: flex;
  width: 100%;
  height: 31vh;
  /* height: 56vh; */
  background-color: #262629;
  border-radius: 0 0 0.5rem 0.5rem;
}

.main-content-box {
  display: flex;
  width: 3rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* flex: 1; */
  margin: 0 0.625rem;
  height: 100%;
}

.btn-box {
  display: flex;
  width: 3rem;
  height: 3rem;
  justify-content: center;
  align-items: center;
  margin: 0.3125rem;

  border: 0px solid #2196f3;
  background-color: #4a4a4f;
  border-radius: 0.625rem;
}
.active {
  background-color: #2196f3 !important;
}

.main-content-bottom-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 0.9375rem;
  box-sizing: border-box;
}

/* 滑块 */
.slider-demo-block {
  width: 100%;
  display: flex;
  align-items: center;
}
.slider-demo-block .el-slider {
  margin-top: 0;
  margin-left: 12px;
}
.play-content {
  background-color: black;
  border: red 1px solid;
  width: 100%;
  height: 100%;
  color: white;
}
</style>
